import QtQuick
import QtQuick.Controls
import Qt.labs.platform

Item {
    id: imgEditSetting
    width: 400
    height: 200
    x: 0
    y: 0

    Behavior on x {
        NumberAnimation {
            duration: 500
        }
    }

    property double itemWidth: 400
    property double itemHeight: 200
    property string colorDialogOpenFlag: ""
    /***************blend*******************/
    signal blendModeChanged(var mode)
    /***************brightnessContrast*******************/
    signal brightnessContrastValueChanged(var brightness, var contrast)
    /***************colorOverlay*******************/
    signal colorOverlayColorChanged(var color)
    /***************colorize*******************/
    signal colorizeValueChanged(var hue, var lightness, var saturation)
    /***************conicalGradient*******************/
    signal conicalGradientValueChanged(var gradient, var angle, var horizontalOffset, var verticalOffset)

    function setCurrentDisplayItem(index) {
        x = 0 - index * itemWidth
    }

    ColorDialog {
        id: colorDialog

        onAccepted: {
            if(colorDialogOpenFlag === "colorOverlay") {
                colorOverlayText.text = currentColor.toString()
            }
        }
    }

    Row {
        anchors.fill: parent

        Item {
            id: blendItem
            width: itemWidth
            height: itemHeight

            TextBtn {
                id: chooseForegroundBtn
                x: blendMode.x + blendMode.width + 50
                y: (parent.height - height) / 2
                width: 120
                height: 40
                tbText: "先选择前景图片"
                tbRadius: height / 2
                tbBorderWidth: 1
                tbFontSize: 14

                onClicked: {
                    myFile.openImageFile(1)
                }
            }

            Text {
                id: blendModeTitle
                x: 10
                y: (parent.height - height) / 2
                width: 80
                height: 40
                text: qsTr("混合模式:")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            ComboBox {
                id: blendMode
                x: blendModeTitle.x + blendModeTitle.width + 10
                y: (parent.height - height) / 2
                width: 100
                height: 40
                font.pixelSize: 14
                model: ["normal", "addition", "average", "color", "colorBurn", "colorDodge",
                "darken", "darkerColor", "difference", "divide", "exclusion", "hardLight",
                "hue", "lighten", "lighterColor", "lightness", "multiply", "negation",
                "saturation", "screen", "subtract", "softLight"]

                onCurrentTextChanged: {
                    blendModeChanged(currentText)
                }
            }

        }

        Item {
            id: brightnessContrastItem
            width: itemWidth
            height: itemHeight

            Text {
                id: brightnessTitle
                x: 10
                y: 10
                width: 80
                height: 40
                text: qsTr("亮度(范围: -1~1, 步长: 0.01):")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }

            Slider {
                id: brightnessSlider
                x: 10
                y: brightnessTitle.y + brightnessTitle.height
                width: parent.width - brightnessTextInput.width - 30
                height: 40
                snapMode: Slider.SnapAlways
                from: -1
                to: 1
                stepSize: 0.01
                value: 0

                onValueChanged: {
                    var brightness = Math.ceil(value * 100) / 100
                    brightnessContrastValueChanged(brightness, 255)
                    brightnessTextInput.text = brightness
                }
            }

            TextInput {
                id: brightnessTextInput
                x: 10
                y: brightnessTitle.y + brightnessTitle.height
                width: 50
                height: 40
                anchors.left: brightnessSlider.right
                anchors.leftMargin: 10
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "0"
                selectByMouse: true
                font.underline: true

                onTextChanged: {
                    if(Number(text) >= -1 && Number(text) <= 1) brightnessSlider.value = Number(text)
                }
            }

            Text {
                id: contrastTitle
                x: 10
                y: brightnessSlider.y + brightnessSlider.height + 20
                width: 80
                height: 40
                text: qsTr("对比度(范围: -1~1, 步长: 0.01):")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }

            Slider {
                id: contrastSlider
                x: 10
                y: contrastTitle.y + contrastTitle.height
                width: parent.width - contrastTextInput.width - 30
                height: 40
                snapMode: Slider.SnapAlways
                from: -1
                to: 1
                stepSize: 0.01
                value: 0

                onValueChanged: {
                    var contrast = Math.ceil(value * 100) / 100
                    brightnessContrastValueChanged(255, contrast)
                    contrastTextInput.text = contrast
                }
            }

            TextInput {
                id: contrastTextInput
                x: 10
                y: contrastTitle.y + contrastTitle.height
                width: 50
                height: 40
                anchors.left: contrastSlider.right
                anchors.leftMargin: 10
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "0"
                selectByMouse: true
                font.underline: true

                onTextChanged: {
                    if(Number(text) >= -1 && Number(text) <= 1) contrastSlider.value = Number(text)
                }
            }
        }

        Item {
            id: colorOverlayItem
            width: itemWidth
            height: itemHeight

            Text {
                id: colorOverlayTitle
                x: 10
                y: (parent.height - colorOverlayTitle.height) / 2
                width: 70
                height: 40
                text: qsTr("叠加颜色:")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            Text {
                id: colorOverlayText
                x: colorOverlayTitle.x + colorOverlayTitle.width + 10
                y: (parent.height - colorOverlayText.height) / 2
                width: 70
                height: 40
                text: qsTr("#000000")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter

                onTextChanged: {
                    colorOverlayColorChanged(text)
                }
            }

            TextBtn {
                id: colorDialogOpenBtn
                x: colorOverlayText.x + colorOverlayText.width + 10
                y: (parent.height - colorDialogOpenBtn.height) / 2
                width: 100
                height: 40
                tbText: qsTr("打开颜色盘")
                tbRadius: height / 2
                tbBorderWidth: 1
                tbFontSize: 14

                onClicked: {
                    colorDialogOpenFlag = "colorOverlay"
                    colorDialog.currentColor = Qt.color(colorOverlayText.text);
                    colorDialog.open()
                }
            }
        }

        Item {
            id: colorizeItem
            width: itemWidth
            height: itemHeight

            Text {
                id: hueTitle
                x: 10
                y: 0
                width: 80
                height: 30
                text: qsTr("色调(范围: 0~1, 步长: 0.01):")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }

            Slider {
                id: hueSlider
                x: 10
                y: hueTitle.y + hueTitle.height
                width: parent.width - hueTextInput.width - 30
                height: 30
                snapMode: Slider.SnapAlways
                from: 0
                to: 1
                stepSize: 0.01
                value: 0

                onValueChanged: {
                    var hue = Math.ceil(value * 100) / 100
                    colorizeValueChanged(hue, 255, 255)
                    hueTextInput.text = hue
                }
            }

            TextInput {
                id: hueTextInput
                x: 10
                y: hueTitle.y + hueTitle.height
                width: 50
                height: 30
                anchors.left: hueSlider.right
                anchors.leftMargin: 10
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "0"
                selectByMouse: true
                font.underline: true

                onTextChanged: {
                    if(Number(text) >= -1 && Number(text) <= 1) hueSlider.value = Number(text)
                }
            }

            Text {
                id: lightnessTitle
                x: 10
                y: hueSlider.y + hueSlider.height + 10
                width: 80
                height: 30
                text: qsTr("亮度(范围: -1~1, 步长: 0.01):")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }

            Slider {
                id: lightnessSlider
                x: 10
                y: lightnessTitle.y + lightnessTitle.height
                width: parent.width - lightnessTextInput.width - 30
                height: 30
                snapMode: Slider.SnapAlways
                from: -1
                to: 1
                stepSize: 0.01
                value: 0

                onValueChanged: {
                    var lightness = Math.ceil(value * 100) / 100
                    colorizeValueChanged(255, lightness, 255)
                    lightnessTextInput.text = lightness
                }
            }

            TextInput {
                id: lightnessTextInput
                x: 10
                y: lightnessTitle.y + lightnessTitle.height
                width: 50
                height: 30
                anchors.left: lightnessSlider.right
                anchors.leftMargin: 10
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "0"
                selectByMouse: true
                font.underline: true

                onTextChanged: {
                    if(Number(text) >= -1 && Number(text) <= 1) contrastSlider.value = Number(text)
                }
            }

            Text {
                id: saturationTitle
                x: 10
                y: lightnessSlider.y + lightnessSlider.height + 10
                width: 80
                height: 30
                text: qsTr("饱和度(范围: 0~1, 步长: 0.01):")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }

            Slider {
                id: saturationSlider
                x: 10
                y: saturationTitle.y + saturationTitle.height
                width: parent.width - saturationTextInput.width - 30
                height: 30
                snapMode: Slider.SnapAlways
                from: -1
                to: 1
                stepSize: 0.01
                value: 0

                onValueChanged: {
                    var saturation = Math.ceil(value * 100) / 100
                    colorizeValueChanged(255, 255, saturation)
                    saturationTextInput.text = saturation
                }
            }

            TextInput {
                id: saturationTextInput
                x: 10
                y: saturationTitle.y + saturationTitle.height
                width: 50
                height: 30
                anchors.left: saturationSlider.right
                anchors.leftMargin: 10
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "0"
                selectByMouse: true
                font.underline: true

                onTextChanged: {
                    if(Number(text) >= -1 && Number(text) <= 1) saturationSlider.value = Number(text)
                }
            }
        }

        Item {
            id: conicalGradientItem
            width: itemWidth
            height: itemHeight

            TitleTextInput {
                id: conicalGradientTextInput
                x: parent.width / 2
                y: 10
                width: 140
                height: 30
                titleWidth: 80
                titleText: qsTr("渐变模式(1-180):")
                inputText: qsTr("0")
                textSize: 14
                textColor: "#000000"
                inputBorderWidth: 1
                inputBorderColor: "#888888"

                onInputTextChanged: {
                    conicalGradientValueChanged(Number(inputText), 255, 255, 255)
                }
            }

            Text {
                id: angleTitle
                x: 10
                y: 20
                width: 80
                height: 30
                text: qsTr("角度(范围: 0~360, 步长: 1):")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }

            Slider {
                id: angleSlider
                x: 10
                y: angleTitle.y + angleTitle.height
                width: parent.width - angleTextInput.width - 30
                height: 30
                snapMode: Slider.SnapAlways
                from: 0
                to: 360
                stepSize: 1
                value: 0

                onValueChanged: {
                    var angle = value
                    conicalGradientValueChanged(255, angle, 255, 255)
                    angleTextInput.text = angle
                }
            }

            TextInput {
                id: angleTextInput
                x: 10
                y: angleTitle.y + angleTitle.height
                width: 50
                height: 30
                anchors.left: angleSlider.right
                anchors.leftMargin: 10
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "0"
                selectByMouse: true
                font.underline: true

                onTextChanged: {
                    if(Number(text) >= -1 && Number(text) <= 1) angleSlider.value = Number(text)
                }
            }

            Text {
                id: horizontalOffsetTitle
                x: 10
                y: angleSlider.y + angleSlider.height
                width: 80
                height: 30
                text: qsTr("水平偏移(范围: -width/2~width/2, 步长: 1):")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }

            Slider {
                id: horizontalOffsetSlider
                x: 10
                y: horizontalOffsetTitle.y + horizontalOffsetTitle.height
                width: parent.width - horizontalOffsetTextInput.width - 30
                height: 30
                snapMode: Slider.SnapAlways
                from: 0 - (root.width - 180) / 4
                to: (root.width - 180) / 4
                stepSize: 1
                value: 0

                onValueChanged: {
                    var horizontalOffset = value
                    conicalGradientValueChanged(255, 255, horizontalOffset, 255)
                    horizontalOffsetTextInput.text = horizontalOffset
                }
            }

            TextInput {
                id: horizontalOffsetTextInput
                x: 10
                y: horizontalOffsetTitle.y + horizontalOffsetTitle.height
                width: 50
                height: 30
                anchors.left: horizontalOffsetSlider.right
                anchors.leftMargin: 10
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "0"
                selectByMouse: true
                font.underline: true

                onTextChanged: {
                    if(Number(text) >= -1 && Number(text) <= 1) horizontalOffsetSlider.value = Number(text)
                }
            }

            Text {
                id: verticalOffsetTitle
                x: 10
                y: horizontalOffsetSlider.y + horizontalOffsetSlider.height
                width: 80
                height: 30
                text: qsTr("垂直偏移(范围: -height/2~height/2, 步长: 1):")
                font.pixelSize: 14
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }

            Slider {
                id: verticalOffsetSlider
                x: 10
                y: verticalOffsetTitle.y + verticalOffsetTitle.height
                width: parent.width - verticalOffsetTextInput.width - 30
                height: 30
                snapMode: Slider.SnapAlways
                from: 0 - (root.height - 254) / 2
                to: (root.height - 254) / 2
                stepSize: 1
                value: 0

                onValueChanged: {
                    var verticalOffset = value
                    conicalGradientValueChanged(255, 255, 255, verticalOffset)
                    verticalOffsetTextInput.text = verticalOffset
                }
            }

            TextInput {
                id: verticalOffsetTextInput
                x: 10
                y: verticalOffsetTitle.y + verticalOffsetTitle.height
                width: 50
                height: 30
                anchors.left: verticalOffsetSlider.right
                anchors.leftMargin: 10
                font.pixelSize: 14
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                text: "0"
                selectByMouse: true
                font.underline: true

                onTextChanged: {
                    if(Number(text) >= -1 && Number(text) <= 1) verticalOffsetSlider.value = Number(text)
                }
            }
        }

        Item {
            id: desaturateItem
            width: itemWidth
            height: itemHeight
        }

    }
}
